<template>
  <div class="footer-tar-bar">
    <div class="footer-tar-bat-item" @click="collectionFeed">
      <div class="icon" v-if="!collection">
        <img src="@/assets/head/kh1.png" />
      </div>
      <div class="icon" v-else>
        <img src="@/assets/goImages/9j.png" alt="" />
      </div>
      <span>收藏</span>
    </div>
    <div class="footer-tar-bat-item" @click="$emit('show-share-page')">
      <div class="icon">
        <img src="@/assets/head/Ld.png" />
      </div>
      <span>晒图</span>
    </div>
    <div class="footer-tar-bat-item" @click="$router.push('/chaperonesquare')">
      <div class="icon">
        <img src="@/assets/head/co.png" />
      </div>
      <span
        >约伴<span v-if="invitation_count">({{ invitation_count }})</span></span
      >
    </div>
  </div>
</template>

<script>
import axios from '@/utils/request'
export default {
  props: {
    invitation_count: Number,
    id: [Number, String]
  },
  data() {
    return { collection: false }
  },
  methods: {
    //收藏
    async collectionFeed() {
      /*
      收藏
      请求地址：https://api.xmonster.cn/v2/user/favorite/feeds/6364
      请求方式：put
      请求头：
      {
      authorization：Token token=7b07e3875b838c9470a46510db4c1975
      }

      取消收藏
      请求地址：https://api.xmonster.cn/v2/user/favorite/feeds/6364
      请求方式：delete
      请求头：
      {
        authorization：Token token=7b07e3875b838c9470a46510db4c1975
      }  
      */
      if (this.collection) {
        const data1 = await axios.delete('/v2/user/favorite/feeds/' + this.id, {
          headers: {
            authorization: 'Token token=7b07e3875b838c9470a46510db4c1975'
          }
        })
        if (data1.message == 'success') {
          this.collection = false
          let collections = JSON.parse(localStorage.getItem('collections')) || []
          collections = collections.filter((item) => item.id !== this.id)
          localStorage.setItem('collections', JSON.stringify(collections))
          this.$toast('取消收藏')
        }
      } else {
        const data = await axios({
          url: 'https://api.xmonster.cn/v2/user/favorite/feeds/' + this.id,
          method: 'put',
          headers: {
            authorization: 'Token token=7b07e3875b838c9470a46510db4c1975'
          }
        })
        if (data.message == 'success') {
          this.collection = true
          let collections = JSON.parse(localStorage.getItem('collections')) || []
          collections.push({
            id: this.id,
            collection: this.collection
          })
          localStorage.setItem('collections', JSON.stringify(collections))
          this.$toast('收藏成功')
        }
      }
    }
  },
  created() {
    let collections = JSON.parse(localStorage.getItem('collections')) || []
    collections.some((item) => {
      if (item.id == this.id) {
        this.collection = true
        return true
      }
    })
  }
}
</script>

<style lang="less" scoped>
.footer-tar-bar {
  position: fixed;
  left: 0;
  bottom: 0;
  color: #3b3b3b;
  display: flex;
  z-index: 15;
  width: 100%;
  height: 50px;
  justify-content: space-around;
  align-items: center;
  background-color: #fff;

  .footer-tar-bat-item {
    flex: 1;
    height: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    &.footer-tar-bat-item:nth-of-type(3),
    &.footer-tar-bat-item:nth-of-type(2) {
      .icon {
        height: 25px;
        width: 25px;
        margin-bottom: 0;
      }
    }

    .icon {
      height: 20px;
      width: 20px;
      margin-bottom: 4px;

      img {
        height: 100%;
        width: 100%;
      }
    }
    span {
      color: #3b3b3b;
      font-size: 12px;
    }
  }
}
</style>
